<template>
  <div id="box">
    <div id="headform">
      <el-form :inline="true" :model="data" class="demo-form-inline">
        <el-form-item label="">
          <el-select v-model="data.searchcoursename" placeholder="课程名称">
            <!-- 返回id给后台 -->
            <el-option v-for="(v,i) in coursenamearr" :label="v.name" :value="v.id" :key="i"></el-option>
            
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="data.searchcourse" placeholder="请选择课程教练">
            <el-option v-for="(v,i) in coacharr" :label="v.name" :value="v.id" :key="i"></el-option>
            
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button size="medium" @click="toaddleague">添加团课</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="coursetable">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="image" label="课程图片" width="180">
             <template slot-scope="scope">
                <img  :src="scope.row.image" alt="QAQ" style="width: 40px;height: 40px">
              </template>
          </el-table-column>
          <el-table-column prop="name" label="课程名称" width="180">
          </el-table-column>
          <el-table-column prop="cname" label="教练"> </el-table-column>
          <el-table-column prop="sort_by" label="排序"> </el-table-column>
          <el-table-column prop="time" label="时长"> </el-table-column>
          <el-table-column prop="max_people" label="可预约人数"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <!-- (scope.row) -->
              <el-button @click="editbtn(scope.$index,tableData)" type="text" size="small"
                >编辑</el-button
              >
              <el-button @click="tovip" type="text" size="small"
                >会员卡</el-button
              >
              <el-button type="text" size="small" @click="open(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!--编辑的弹出框-->
    <div id="editalertbox">
      <el-dialog title="课程添加编辑" :visible.sync="editalert">
        <el-form :model="editTable">
          <el-form :inline="true" :model="editTable" class="demo-form-inline">
            <div id="coursealertname">
              <el-form-item label="课程名称">
                <el-input v-model="editTable.name" placeholder="请输入课程名称"></el-input>
              </el-form-item>
            </div>

            <span id="coursephoto">课程图片</span>
            <div id="coursealertupload">
              <el-upload
                action="/gym/uploadImage"
                list-type="picture-card"
                :auto-upload="true"
                :on-success="imgupload"
                name="image"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>

            <div id="leagueaddress">
              <el-form-item label="添加视频地址" :label-width="'100'">
                <el-input v-model="editTable.url" autocomplete="off" placeholder="仅支持腾讯视频"></el-input>
              </el-form-item>
            </div>

            <div id="coursetime">
              <el-form-item label="课程时长" :label-width="'100'">
                <el-input v-model="editTable.time" autocomplete="off" placeholder="请输入数字"></el-input>
              </el-form-item>
            </div>

            <div id="maxperson">
              <el-form-item label="最多上课人数" :label-width="'100'">
                <el-input
                  v-model="editTable.max_people"
                  autocomplete="off"
                placeholder="请输入数字"></el-input>
              </el-form-item>
            </div>

            <div id="leaguecoach">
              <el-form-item label="教练">
                <el-select v-model="editTable.cname1" placeholder="">
                  <el-option v-for="(v,i) in coacharr" :key="i" :label="v.name" :value="v.id"></el-option>
                  
                </el-select>
              </el-form-item>
            </div>

            <div id="leaguetype">
              <el-form-item label="课计类型">
                <el-select v-model="editTable.type" placeholder="请选择活动区域">
                  <el-option label="固定课时费" value="固定课时费"></el-option>
                  <el-option label="按上课人数收费" value="按上课人数收费"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div id="coursefee">
              <el-form-item label="课时费" :label-width="'100'">
                <el-input v-model="editTable.time_money" autocomplete="off" placeholder="请输入数字"></el-input>
              </el-form-item>
            </div>

            <div>
              <el-form-item label="人数不足不开课" :label-width="'100'">
                <el-input
                  v-model="editTable.min_people"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>

            <div id="courseremarks">
              <el-form-item label="课程备注" :label-width="'100'">
                <el-input v-model="editTable.remarks" autocomplete="off" placeholder="请输入备注"></el-input>
              </el-form-item>
            </div>

            <div id="leaguetag">
              <div id="taginp">
                <el-form-item label="课程标签" :label-width="'100'">
                  <el-input
                    v-model="msg"
                    autocomplete="off"
                    @keyup.enter="addarr"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="addarr">添加</el-button>
                </el-form-item>

                <div id="coursetagdiv">
                  <ul>
                    <li v-for="(v,i) in arr" :key="i">{{ v }} <a @click="delformarr(i)" href="javascript:;">x</a></li>
                  </ul>
                </div>
              </div>
              <span id="notesspan">注：最多三个标签</span>
            </div>

            <div id="leagueintroduce">
              <el-form-item label="课程介绍" :label-width="'100'">
                <el-input
                  v-model="editTable.description"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>

            <div id="coursesort">
              <el-form-item label="排序" :label-width="'100'">
                <el-input v-model="editTable.sort_by" autocomplete="off" placeholder="请输入数字"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editalert = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div id="pagefoot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaulturl:'',
      arr:[],
      coursenamearr:[],
      id:'',
      coacharr:[],
      photourl:'',
      total: 0,
      size: 5,
      page: 1,
      msg: "",
      data: {
        searchname: "",
        searchcourse: "",
        searchcoursename:'',
        total: 0,
        name: "",
        address: "",
        duration: "",
        maxperson: 0,
        coach: "1",
        type: "",
        fee: 0,
        arr:[],
        minperson: 0,
        remarks: "",
        introduce: "",
        sort: 0,
        image:''
      },
      tableData: [],
      editTable:[],
      editalert: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    toaddleague() {
      this.$router.push("/addleague");
    },
    tovip() {
      this.$router.push("/vip");
    },
    getCon() {
      this.$axios({
        url: "/gym/courses/list",
        method:'post',
        dataType:"json",
        data: {
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
    },
    next() {
      this.page++;
    },
    edit() {
      this.$axios({
        url: "/gym/courses/update",
        method: "post",
        dataType:"json",
        data: {
          id:this.id,
          name: this.editTable.name,
          image:this.photourl==''?(this.defaulturl):this.photourl,
          url: this.editTable.url,
          time: this.editTable.time,
          maxPeople: this.editTable.max_people,
          coachId: this.editTable.cname1,
          type: this.editTable.type,
          timeMoney: this.editTable.time_money,
          minPeople: this.editTable.min_people,
          remarks: this.editTable.remarks,
          tags: this.data.arr.toString(),
          description: this.editTable.description,
          sortBy: this.editTable.sort_by
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("编辑成功");
          this.editalert = false;
          this.getCon();
        } else {
          this.$message.error("编辑失败");
        }
        this.data.name = "";
        this.data.address = "";
        this.data.duration = "";
        this.data.maxperson = "";
        this.data.coach = "";
        this.data.type = "";
        this.data.fee = "";
        this.data.minperson = "";
        this.data.remarks = "";
        this.data.arr = "";
        this.data.introduce = "";
        this.data.sort = "";
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.photourl=file.url;
    },
    handleDownload(file) {
      console.log(file);
    },
    imgupload(response, file, fileList){
      console.log(response, file, fileList);
      this.photourl=response.data;
    },
    addarr() {
      this.arr.push(this.msg);
      this.msg = "";
    },
    open(v) {
      this.$confirm("此操作将永久删除这条消息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(v);
          this.$axios({
            url: "/gym/courses/delete",
            method: "post",
            dataType:"json",
            data: {
              id: v.id,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.getCon();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    search(){
      this.$axios({
        url:'/gym/courses/list',
        method:'post',
        dataType:'json',
        data:{
          coursesId:this.data.searchcoursename,
          coachsId:this.data.searchcourse
        }
      }).then((res)=>{
        console.log(res);
        if(res.data.code==200){
            this.tableData=res.data.data;
            this.$message.success('查询成功！');
        }else{
            this.$message.error('查询失败！');
        }
        this.data.searchcoursename='';
        this.data.searchcourse='';
      })
    },
    editbtn(index,tableData){
      console.log(111111,index);
      this.id=tableData[index].id;
      this.editalert=true;
      this.editTable=tableData[index];
      this.defaulturl=tableData[index].image;
      console.log(this.defaulturl);
    },
    getCoach(){
      this.$axios({
        url:'/gym/coach/all',
        method:"post",
        dataType:"json",
      }).then((res)=>{
        console.log(res);
        this.coacharr=res.data.data;
      })
    },
    getcoursename(){
      this.$axios({
        url:'/gym/courses/nameList',
        method:'post',
        dataType:"json"
      }).then((res)=>{
        console.log(res);
        this.coursenamearr=res.data.data;
      })
    },
    delformarr(index){
      this.arr.splice(index,1);
    }
  },
  mounted() {
    this.getCon();
    this.getCoach();
    this.getcoursename();
  },
};
</script>
<style scoped lang="less">
a{
  text-decoration: none;
  color: rgb(26, 188, 156);
}
#headform {
  text-align: left;
  float: left;
  margin-top: 60px;
  margin-left: -217px;
}
#coursephoto {
  float: left;
  margin-left: 35px;
}
#coursealertupload {
  text-align: left;
  margin-left: 120px;
}
#leaguecoach {
  width: 300px;
  margin-left: 68px;
}
#leaguetype {
  width: 300px;
  margin-left: 40px;
}
#leagueaddress {
  margin-top: 20px;
  margin-left: 10px;
}
#taginp {
  width: 500px;
  float: left;
  margin-left: 40px;
  height: 100px;
}
#coursetagdiv {
  float: left;
  margin-left: 65px;
  width: 450px;
  height: 30px;
  overflow: hidden;
  ul {
    li {
      float: left;
      list-style: none;
      font-weight: bold;
      border: 1px solid rgb(26, 188, 156);
      border-radius: 5px;
      padding: 3px;
      margin-left: 4px;
      margin-top: 3px;
    }
  }
}
#leagueintroduce {
  margin-top: 130px;
  margin-left: 40px;
}
#coursetable {
  width: 98%;
  margin-left: 10px;
}

#pagefoot {
  text-align: right;
  position: absolute;
  right: 50px;
  bottom: 30px;
}
#editalertbox {
  text-align: left;
}
#courseremarks {
  margin-left: 40px;
}
#coursesort {
  margin-left: 68px;
}
#coursefee {
  margin-left: 55px;
}
#maxperson {
  margin-left: 12px;
}
#coursetime {
  margin-left: 40px;
}
#coursealertname {
  margin-left: 35px;
}
#notesspan{
  display: block;
  float: left;
  font-size: 14px;
  color: #333;
  margin-left: 110px;
}
</style>